<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true">
				<el-form-item label="商品名称：">
					<el-input v-model="viewForm.type"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSerch" icon="search">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleReset" icon="circle-close">重置</el-button>
				</el-form-item>
				<el-form-item v-if="addForm.shopId">
					<el-button type="primary" @click="handleAdd" icon="plus">录入</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="rows" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;" id="id" border height="444">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="goodsName" label="名称" width="280" sortable>
			</el-table-column>
			<el-table-column prop="goodsTypeName" label="分类" min-width="200" sortable>
			</el-table-column>
			<el-table-column prop="brandName" label="品牌" min-width="200" sortable>
			</el-table-column>
			<el-table-column prop="goodsSn" label="商品编号" width="180" sortable>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="380">
				<template scope="scope">
					<el-button size="small" @click="showUploadDialog(scope.row.id)">上传封面</el-button>
					<el-button size="small" @click="showFormDialog(scope.row.id,'goods-banner')">商品相册</el-button>
					<el-button size="small" @click="showFormDialog(scope.row.id,'model')">商品模型</el-button>
					<el-button size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<!-- <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
      </el-pagination> -->
			<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="totals" style="float:right;">
			</el-pagination>
		</el-col>
		<el-dialog title="上传封面" v-model="showUpload" :close-on-click-modal="false">
			<el-upload
			class="avatar-uploader"
			:action="baseJs.getSrcUrl('api/attachMentController/uploadImageSingle.do',{id:imageId?imageId:'',
					businessKey:uploadForm.id,type:'goods-cover'})"
			:multiple="false"
			:show-file-list="false"
			:on-success="handleAvatarSuccess"
			:before-upload="beforeAvatarUpload">
			<img v-if="imageUrl" :src="imageUrl" class="avatar">
			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
		</el-dialog>
		<el-dialog title="插入图片" v-model="showUpload_add" :on-success="uploadSuccess" :close-on-click-modal="false">
			<el-upload drag multiple 
				:on-success="uploadSuccess" 
				class="upload-demo"
				ref="upload" 
				:action="baseJs.getSrcUrl('api/attachMentController/uploadAttachMent.do',{type:'goods',id:addForm.shopId})"
			 	:on-preview="handlePreview" :auto-upload="true">
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				<!--<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
				<!--<el-button slot="trigger" size="small" type="primary">选取文件</el-button>-->
				<!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
			</el-upload>
		</el-dialog>
		<!--录入界面-->
		<el-dialog title="添加商品" size="large" v-model="addFormVisible">
			<template v-if="addFormType=='add'">
				<el-form :model="addForm" label-width="80px" :rules="addrules" ref="addForm">
					<el-form-item label="商品名称" prop="goodsName" :label-width="formLabelWidth">
						<el-input v-model="addForm.goodsName" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="商品编号" prop="goodsSn" :label-width="formLabelWidth">
						<el-input v-model="addForm.goodsSn" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="商品简介" prop="goodsRemark" :label-width="formLabelWidth">
						<el-input v-model="addForm.goodsRemark" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="分类" prop="catId" :label-width="formLabelWidth">
						<el-select v-model="addForm.catId" filterable placeholder="请选择">
							<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id+';'+item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品品牌" prop="brandId" :label-width="formLabelWidth">
						<el-select v-model="addForm.brandId" filterable placeholder="请选择">
							<el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id+';'+item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品重量" prop="weight" :label-width="formLabelWidth">
						<el-input v-model="addForm.weight" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="商品体积" prop="volume" :label-width="formLabelWidth">
						<el-input v-model="addForm.volume" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="上架时间" prop="onTime" :label-width="formLabelWidth">
							<el-date-picker
						v-model="onTime"
						@change="changeOnTime"
						type="datetime"
						placeholder="选择日期时间">
						</el-date-picker>

						<!-- format="yyyy-MM-dd HH:mm" -->
					</el-form-item>
					<el-form-item>
						<el-row>
							<el-col :span="8">
								<el-form-item label="是否包邮" prop="isFreeShipping" :label-width="formLabelWidth">
									<el-switch
									v-model="addForm.isFreeShipping"
									:on-value="1"
									:off-value="0"
									on-text="是"
									off-text="否">
									</el-switch>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="是否虚拟商品" prop="isVirtual" :label-width="formLabelWidth">
									<el-switch
									v-model="addForm.isVirtual"
									:on-value="1"
									:off-value="0"
									on-text="是"
									off-text="否">
									</el-switch>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="是否上架" prop="isOnSale" :label-width="formLabelWidth">
									<el-switch
									v-model="addForm.isOnSale"
									:on-value="1"
									:off-value="0"
									on-text="是"
									off-text="否">
									</el-switch>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="是否推荐" prop="isRecommend" :label-width="formLabelWidth">
									<el-switch
									v-model="addForm.isRecommend"
									:on-value="1"
									:off-value="0"
									on-text="是"
									off-text="否">
									</el-switch>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="是否新品" prop="isNew" :label-width="formLabelWidth">
									<el-switch
									v-model="addForm.isNew"
									:on-value="1"
									:off-value="0"
									on-text="是"
									off-text="否">
									</el-switch>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="商品关键词" prop="keywords" :label-width="formLabelWidth">
						<el-input v-model="addForm.keywords" :rows="6" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="商品详细介绍" prop="goodsContent" :label-width="formLabelWidth">
						<!--<el-input v-model="addForm.modelInfo" auto-complete="off"></el-input>-->
						<quill-editor v-model="addForm.goodsContent" ref="myTextEditor">
						</quill-editor>
					</el-form-item>
				</el-form>
			</template>
			<template v-else-if="addFormType=='goods-banner'">
				<el-upload
				:action="baseJs.getSrcUrl('api/attachMentController/uploadAttachMent.do',{id:uploadForm.id,
								type:'goods-banner'})"
				list-type="picture-card"
				:file-list="bannerList"
				multiple
				:on-preview="handlePictureCardPreview"
				:on-remove="handleRemove">
				<i class="el-icon-plus"></i>
				</el-upload>
				<el-dialog v-model="dialogVisible" size="tiny">
				<img width="100%" :src="dialogImageUrl" alt="">
				</el-dialog>
			</template>
			<template v-else="addFormType=='model'">
				<el-form :model="editForm" label-width="80px" :rules="editrules" ref="editForm">
					<el-form-item label="商品型号" prop="brandId" :label-width="formLabelWidth">
						<el-select v-model="editForm.brand" filterable placeholder="请选择">
							<el-option v-for="item in modelList" :key="item.id" :label="item.name" :value="item.id+';'+item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品规格":label-width="formLabelWidth">
					</el-form-item>
					<el-form-item label="网络":label-width="formLabelWidth">
						 <el-checkbox-group @change="changeGoodsAttr($event,'wl')" v-model="checkboxValObj.wl" size="small">
							<el-checkbox-button v-for="city in cities1" :label="city" :key="city">{{city}}</el-checkbox-button>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="内存":label-width="formLabelWidth">
						 <el-checkbox-group @change="changeGoodsAttr($event,'nc')" v-model="checkboxValObj.nc" size="small">
							<el-checkbox-button v-for="city in cities2" :label="city" :key="city">{{city}}</el-checkbox-button>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="屏幕":label-width="formLabelWidth">
						 <el-checkbox-group @change="changeGoodsAttr($event,'pm')" v-model="checkboxValObj.pm" size="small">
							<el-checkbox-button v-for="city in cities3" :label="city" :key="city">{{city}}</el-checkbox-button>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="颜色":label-width="formLabelWidth">
						 <el-checkbox-group @change="changeGoodsAttr($event,'ys')" v-model="checkboxValObj.ys" size="small">
							<el-checkbox-button v-for="city in cities4" :label="city" :key="city">{{city}}</el-checkbox-button>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="":label-width="formLabelWidth">
						<el-table
							:data="goodsAttrTable"
							border
							style="width: 100%">
							<template v-for="item in goodsAttrKey">
								<el-table-column
								v-if=""
								:prop="item.key"
								:label="item.text"
								width="120">
								</el-table-column>
							</template>
							<el-table-column
							prop="shopPrice"
							label="价格"
							width="120">
							</el-table-column>
							<el-table-column
							prop="storeCount"
							label="库存"
							width="120">
							</el-table-column>
							<el-table-column
							label="操作"
							width="100">
							<template scope="scope">
								<el-button
								@click.native.prevent="deleteRow(scope.$index)"
								type="text"
								size="small">
								移除
								</el-button>
							</template>
							</el-table-column>
						</el-table>
					</el-form-item>
		
				</el-form>
			</template>
			
			<!-- <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
				<el-tab-pane label="基本信息" name="first">
					
				</el-tab-pane>
				<el-tab-pane label="商品相册" name="second">
					
				</el-tab-pane>
			</el-tabs> -->
			
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--编辑界面-->
		<el-dialog title="编辑" size="large" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px" :rules="editrules" ref="editForm">
				<el-form-item label="型号" prop="name" :label-width="formLabelWidth">
					<el-input v-model="editForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="品牌" prop="brandId" :label-width="formLabelWidth">
					<el-select v-model="editForm.brand" filterable placeholder="请选择">
						<el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id+';'+item.name">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="分类" prop="catId" :label-width="formLabelWidth">
					<el-select v-model="editForm.type" filterable placeholder="请选择">
						<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id+';'+item.name">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="描述" prop="modelDesc" :label-width="formLabelWidth">
					<el-input v-model="editForm.modelDesc" type="textarea" :rows="6" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="详细介绍" prop="modelInfo" :label-width="formLabelWidth">
					<!--<el-input v-model="addForm.modelInfo" auto-complete="off"></el-input>-->
					<quill-editor v-model="editForm.modelInfo" ref="myTextEditor2">

					</quill-editor>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

	</section>
</template>
<script>
	import { list, save, update, del, brandList, goodsTypeList } from '../../api/model';
	import { brandlist} from '../../api/brand';
	import { getCurrentShop} from '../../api/shop';
	import * as goods from '../../api/goods';
	import { getUploadList,delAttachMent} from '../../api/upload';
	import VueQuillEditor from 'vue-quill-editor'
	export default {
		data() {
			return {
				headers: {
					token: localStorage.getItem('token')
				},
				uploadForm: {
					id: "",
					type: "model"
				},
				textIndex:"",
				brandList: [],
				fileList2: [],
				typeList: [],
				showUpload: false,
				showUpload_add: false,
				isHot: '',
				sels: '',
				rows: [],
				// total: 0,
				listLoading: false,
				page: 1,
				// num:10,
				totals: 0,
				size: 10,
				currentPage: 1,
				isShow: false,
				addFormVisible: false, //录入界面是否显示
				addLoading: false,
				//录入界面数据
				addForm: {
					goodsName:"",
					goodsSn:"",
					goodsRemark:"",
					catId:"",
					brandId:"",
					isFreeShipping:0,
					keywords:"",
					originalImg:"",
					goodsContent:"",
					isVirtual:0,
					volume:"",
					weight:"",
					isOnSale:1,
					onTime:"",
					isRecommend:1,
					isNew:1,
					goodsType:"",
					exchangeIntegral:0,
					shopId:'',
				},
				addFormCopy:'',
				addrules: {
					goodsName: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}],
					catId: [{
						required: true,
						message: '商品分类不能为空',
						trigger: 'change'
					}],
				},
				editFormVisible: false, //编辑界面是否显示
				editLoading: false,
				//编辑界面数据
				editForm: {},
				editrules: {
					carnumber: [{
						required: true,
						message: '请输入正确车牌号',
						trigger: 'blur'
					}],
					type: [{
						required: true,
						message: '请输入车辆类型',
						trigger: 'blur'
					}],
				},
				viewFormVisible: false, //查看界面是否显示
				viewLoading: false,
				//查看界面数据
				viewForm: {
					type: '',
					carNumber: '',
					departName: ''
				},
				formLabelWidth: "100px",
				nowType:"",
				activeName2:'first',
				dialogImageUrl: '',
				dialogVisible: false,
				swichVal:false,
				imageUrl: '',
				imageId:'',
				brandlistdata:[],
				onTime:"",
				addFormType:'add',
				modelList:[],
				cities1:['3g', '4g'],
				cities2:['16g', '8g', '32g', '64g'],
				cities3:['触屏', '文字屏'],
				cities4:['黑色', '白色', '金色'],
				checkboxValObj:{
					wl:[],
					nc:[],
					pm:[],
					ys:[],
				},
				
				goodsAttrTable:[{
					shopPrice:"",
					storeCount:"",
				}],
				goodsAttrTableCopy:[{
					shopPrice:"",
					storeCount:"",
				}],
				goodsAttrKey:[
					{text:"网络",key:"wl"},
					{text:"内存",key:"nc"},
					{text:"屏幕",key:"pm"},
					{text:"颜色",key:"ys"}],
				bannerList:[]
			};
		},
		components: {
			VueQuillEditor
		},
		methods: {
			getGood(id){
				return new Promise((resolve, reject) => {
					goods.getGood({id:id}).then(data=>{
						for(let i in this.addForm){
							this.$set(this.addForm,i,data.obj[i])
						}
						this.addForm.brandId = data.obj.brandId + ';' + data.obj.brandName;
						this.addForm.catId = data.obj.catId + ';' + data.obj.goodsTypeName;
						this.$set(this.addForm,'id',data.obj.id)
						this.$set(this,'onTime',data.obj.onTime)
						resolve(data);
					}).catch(err=>{
						resolve(err);
					})
    			})
				
			},
			deleteRow(index){
				this.goodsAttrTable.splice(index,1)
			},
			cloneTr(tableobj,keyarr,key){
				console.log(tableobj,key)
				let table=[]
				keyarr.map((item,index)=>{
					// this.$set(tr,i,item)
					// tr[i]=item
					tableobj.map((trobj,trindex)=>{
						if(trobj[key]){
							let newtr=this.baseJs.jsonCopy(trobj);
							newtr[key]=item
							table.push(newtr)
						}else{
							this.$set(trobj,key,item)
							table.push(trobj)
						}
					})
					
				});
				return table;
			},
			changeGoodsAttr(val,type){
				let table=this.baseJs.jsonCopy(this.goodsAttrTableCopy);
				for(let i in this.checkboxValObj){
					if(this.checkboxValObj[i].length){
						table=this.cloneTr(table,this.checkboxValObj[i],i)
					}
				}
				this.$set(this,'goodsAttrTable',table)
			},
			getModelList(){
				list().then(data=>{
					this.modelList=data.obj;
				})
			},
			changeOnTime(val){
				this.addForm.onTime=val
			},
			getShopInfo(){
				getCurrentShop({id:this.$store.getters.userId}).then(data=>{
					if(data.obj){
						this.addForm.shopId=data.obj.id
						this.$set(this,'addFormCopy',Object.assign({}, this.addForm))
					}
				})
			},
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
				this.addForm.originalImg=res.obj[0];
				goods.update({id:this.uploadForm.id,originalImg:res.obj[0]}).then(data=>{
					
				});
				getUploadList({id:this.uploadForm.id,type:'goods-cover'}).then((res) => {
					if(res.obj.length){
						this.imageId=res.obj[0].id
					}
				});
				
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
				// delAttachMent({id:file.id}).then(data=>{})
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			handleClick(){

			},
			uploadSuccess(res, file,fileList) {
				this.editor.insertEmbed(this.textIndex, 'image',this.baseJs.getSrcUrl(res.obj[0]));
				for(let i=0;i<fileList.length;i++){
					if(fileList[i].status=="uploading")
						return;
				}
				this.showUpload_add=false;
			},
			getUploadList(id) {
				let that = this;

				let params = {
					"id": id,
					type: "model"
				}

				getUploadList(params).then((res) => {
					// console.log(res);         
					that.fileList2 = res.obj;
					// console.log(this.total);
					// this.listLoading = false;
				});
			},
			customButtonClick() {
				alert("!");
			},
			showUploadDialog(id) {
				// this.getUploadList(id);
				this.getGood(id).then(data=>{
					this.uploadForm.id = id;
					getUploadList({id:id,type:'goods-cover'}).then((res) => {
						if(res.obj.length){
							this.imageId=res.obj[0].id
							this.imageUrl=this.addForm.originalImg?this.baseJs.getSrcUrl(this.addForm.originalImg):"";
						}
						this.showUpload = true;
					});
				});
				
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
				delAttachMent({id:file.id})
			},
			handlePreview(file) {
				console.log(file);
			},
			//列表切换列表页
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getList();

			},
			//列表切换显示条数
			handleSizeChange(val) {
				this.size = val;
				this.getList();
			},
			getSelectDepart(id) {
				this.treeSelect.departId = id;
			},
			//点击节点选中节点数据
			handleNodeClick(data, node) {
				this.treeSelect.departId = data.id;
				this.treeSelect.depart = data.name;
				this.isShow = !this.isShow;
			},
			//初始化
			// getTabData(){
			//   var params={departId:this.treeSelect.departId};
			//   getSubTypes(params).then(res => {
			//     this.subType=res.data;
			//     this.checkList=res.data;
			//   });
			// },
			//查询
			handleSerch: function() {
				// var paras = this.treeSelect.departId;
				// alert(paras);
				let para = {
					page: this.currentPage,
					rows: this.size,
					// departId: this.treeSelect.departId
					// departId: this.departnum,
					// row:this.row,
					//          name: this.item.value
				};
				console.log(para);
				// this.listLoading = true;
				getListList(para).then((res) => {
					// console.log(res);         
					this.rows = res.obj;
					this.totals = Number(res.total);
					// console.log(this.total);
					// this.listLoading = false;
				});

			},
			// 重置
			handleReset: function() {
				this.treeSelect.depart = null;
				this.treeSelect.departId = null;
				this.getList();
			},
			// 模板下载
			// handleDload:function () {
			//    updateCars().then(()=>{
			//       alert("下载成功")
			//   });
			//   updateCars();
			// },
			selsChange: function(sels) {
				this.sels = sels;
			},
			// handleCurrentChange(val) {
			//   this.page = val;
			//   this.getList();
			// },
			//获取车辆列表
			getList() {
				let para = {
					page: this.currentPage,
					rows: this.size,
				};
				// console.log(para);
				this.listLoading = true;
				goods.list(para).then((res) => {
					// console.log(res);         
					this.rows = res.obj;
					this.totals = Number(res.total);
					// console.log(this.total);
					this.listLoading = false;
				});
			},
			getBrandList() {
				let that = this;

				let params = {

				}
				brandList(params).then((res) => {
					that.brandList = res.obj;
				});
			},
			getGoodTypeList() {
				let that = this;

				let params = {

				}

				goodsTypeList(params).then((res) => {
					that.typeList = res.obj;
				});
			},
			//显示录入界面
			handleAdd: function() {
				if(this.addForm.id){
					this.$set(this,'addForm',this.baseJs.jsonCopy(this.addFormCopy))
				}
				this.$nextTick(()=>{
					this.addFormVisible = true;
					this.addFormType="add";
					// this.uploadForm.id = "model";
					this.nowType = "add";
					let that = this;
					setTimeout(function() {
						that.editor.getModule("toolbar").addHandler("image", that.imgHandler);
					}, 1000)
				})
				
			},
			showFormDialog(id,type) {
				this.addFormVisible = true;
				this.uploadForm.id=id;
				this.addFormType=type;
				if(type=='goods-banner'){
					getUploadList({id:id,type:type}).then(data=>{
						if(data.obj.length){
							let arr=[]
							data.obj.map(item=>{
								let obj={}
								obj.url=this.baseJs.getSrcUrl(item.realPath);
								obj.name=item.fileName
								obj.id=item.id
								arr.push(obj)
							})
							this.bannerList=arr;
						}
						
					})
				}
			},
			//录入
			addSubmit: function() {
				if(this.addFormType=='add'){
					this.$refs.addForm.validate((valid) => {
						if(valid) {
							this.$confirm('确认提交吗？', '提示', {}).then(() => {
								this.addLoading = true;
								let para = Object.assign({}, this.addForm);
								if(para.brandId) {
									let brand = para.brandId.split(";");
									para.brandId = brand[0];
									para.brandName = brand[1];
								}
								if(para.catId) {
									let type = para.catId.split(";");
									para.catId = type[0];
									para.catName = type[1];
								}
								goods[this.addForm.id?'update':'save'](para).then((res) => {
									this.addLoading = false;
									// this.$refs['addForm'].resetFields();
									this.$set(this,'addForm',Object.assign({}, this.addFormCopy))
									console.log(this.addForm,this.addFormCopy)
									this.addFormVisible = false;
									this.getList();
								});
							});
						}
					});
				}else if(this.addFormType=='model'){

				}else if(this.addFormType=='goods-banner'){
					this.addFormVisible = false;
				}
				
			},
			//显示编辑界面
			handleEdit(id) {
				// console.log(scope);
				// this.editFormVisible = true;
				// this.editForm = Object.assign({}, row);
				// this.editForm.brand = this.editForm.brandId + ';' + this.editForm.brandName;
				// this.editForm.type = this.editForm.catId + ';' + this.editForm.catName;
				this.addFormType = "add";
				this.nowType = "add";
				// this.uploadForm.id = "model";
				this.getGood(id).then(data=>{
					this.addFormVisible = true;
					let that =this;
					setTimeout(function() {
						that.editor.getModule("toolbar").addHandler("image", that.imgHandler);
					}, 1000)
				})
				
			},
			//显示查看界面
			handleView: function(index, row) {
				this.viewFormVisible = true;
				this.viewForm = Object.assign({}, row);
			},
			//      编辑
			editSubmit: function() {
				this.$refs.editForm.validate((valid) => {
					if(valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							let para = Object.assign({}, this.editForm);
							update(para).then((res) => {
								this.editLoading = false;
								// this.$notify({
								//   title: '成功',
								//   message: '提交成功',
								//   type: 'success'
								// });
								this.$refs['editForm'].resetFields();
								this.editFormVisible = false;
								this.getList();
							}).catch(err=>{
								this.editLoading = false;
							})
						});
					}
				});
			},

			//删除
			handleDel: function(index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = {
						id: row.id
					};
					goods.del(para).then((res) => {
						this.listLoading = false;
						// this.$notify({
						//   title: '成功',
						//   message: '删除成功',
						//   type: 'success'
						// });
						this.getList();
					});
				}).catch(() => {

				});
			},
			//批量删除
			batchRemove: function() {
				var ids = this.sels.map(item => item.id).toString();
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = {
						ids: ids
					};
					batchRemoveCars(para).then((res) => {
						this.listLoading = false;
						// this.$notify({
						//   title: '成功',
						//   message: '删除成功',
						//   type: 'success'
						// });
						this.getList();
					});
				}).catch(() => {

				});
			},
			imgHandler(state) {
				if(state) {
					//button is clicked
					//				  alert("!");
					this.showUpload_add = true;
					this.textIndex = this.editor.getSelection().index;
//					this.insertEmbed(editor.getSelection().index, 'image', "http://120.77.207.47:8080/upload/model/587ecfcfN78fcbe02 (1).jpg");
				}
			},
			handlePreview(file) {
				console.log(file);
			},
		},
		activated: function() {
			this.getShopInfo();
			this.getList();
			this.getBrandList();
			this.getGoodTypeList();
			this.getModelList();;

		},
		mounted: function() {
			
		},
		computed: {
			editor() {
				if(this.nowType=="add")
					return this.$refs.myTextEditor.quill;
				else
					return this.$refs.myTextEditor2.quill;
			}
		},

	};
</script>
<style >
	
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}
	
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>